<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link rel="stylesheet" type="text/css" href="__STATIC__/index/css/style.css"/>
    <script type="text/javascript" src="__STATIC__/index/js/rem.js"></script>
    <title>申请售后</title>
</head>
<body>
<div class="write">
    <!--填写售后表单-->
    <div class="write_form">
        <div class="write_list">
            <span>申请类型</span>
            <input type="text" name="type" disabled="" value="退款"/>
        </div>
        <!--退款原因-->
        <div class="write_list clear">
            <span>退款原因</span>
            <img class="arrow" src="__STATIC__/index/img/arrow-gery.png"/>
            <p class="fr val">请选择退款原因</p>
        </div>
        <!--退款金额-->
        <div class="write_list">
            <span>退款金额</span>
            <p class="brown fr super-text bold">￥{$order.pay}</p>
        </div>
        <!--退款说明-->
        <div class="write_list">
            <span>退款说明</span>
            <input type="text" name="content" placeholder="选填"/>
        </div>
        <!--联系电话-->
        <div class="write_list">
            <span>联系电话</span>
            <input id="phone" type="tel" name="phone" value="{$order.phone ?: ''}" placeholder="请填写联系电话" maxlength="11"/>
        </div>
    </div>

    <div class="write_upload">
        <button class="submit post_submit">提交</button>
    </div>
</div>
<!--下拉选择框-->
<div class="select_box">
    <ul class="select">
        {foreach $reason as $v}
        <li>{$v}</li>
        {/foreach}
    </ul>
</div>
<script type="text/javascript" src="__STATIC__/index/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="__STATIC__/index/js/layer/mobile/layer.js"></script>
<script type="text/javascript">
    //弹出下拉框
    $('.val').on('click', function () {
        $('.select_box').toggleClass('block')
        $('.select_box .select').css({'top': '2.55rem'})
    })
    //弹出选择框时禁止滑动
    $('.select_box').on('touchmove', function (e) {

    })
    //点击下拉框的值
    $('.select li').on('click', function () {
        $(this).addClass('on').siblings().removeClass('on');
        var val = $(this).text();
        //获取选择的下拉框的值
        $('.val').html(val);
        //改变p标签内的值
        $('.val').css({'font-size': '0.3rem', 'color': '#2e2e2e'});
        //改变样式
        $('.select_box').removeClass('block');
    })

    //点击提交按钮
    $('.submit').on('click', function () {
        if ($('.val').text() == '请选择退款原因') {
            layer.open({
                content: '请选择退款原因',
                skin: 'msg',
                time: 2
            })
        } else if ($('#phone').val() == '') {
            layer.open({
                content: '请填写联系电话',
                skin: 'msg',
                time: 2
            })
        } else {
            $('.submit').attr('disabled',true);
            $.ajax({
                url:"",
                type:"post",
                data:{id:'{$order.id}',reason:$('.val').text(),content:$('input[name="content"]').val(),phone:$('#phone').val()},
                success:function (res) {
                    if(res.code=='ok'){
                        layer.open({
                            content: '提交成功',
                            skin: 'msg',
                            time: 2,
                            end:function () {
                                window.location.replace('post_success');
                            }
                        })
                    }else {
                        layer.open({
                            content: res.msg,
                            skin: 'msg',
                            time: 2
                        })
                        $('.submit').attr('disabled',false);
                    }

                }
            })

        }
    })

</script>
</body>
</html>